<template>
  <basic-dialog :visible="show"
                title="报工明细"
                isShowClose
                :min-width="'760px'"
                :isShowInnerLoading="isShowInnerLoading"
                @close="show = false"
  >
    <q-table
      :data="tableData" :columns="columnsCheckinLog"
      row-key="name" class="myTable scroll inherit"
      style="max-height: 260px; margin: 20px"
      :pagination.sync="paginationCheckinLog" :hide-bottom="!!tableData.length">
      <template v-slot:body-cell-id="props">
        <q-td class="id">
          {{ props.row.id }}
        </q-td>
      </template>
      <template v-slot:body-cell-creator="props">
        <q-td class="creator">
          {{ props.row.creator ? props.row.creator : '—' }}
        </q-td>
      </template>
      <template v-slot:body-cell-shiftName="props">
        <q-td class="shiftName">
          {{ props.row.shiftName ? props.row.shiftName : '—' }}
        </q-td>
      </template>
      <template v-slot:body-cell-operator="props">
        <q-td class="operator">
          {{ props.row.operator ? props.row.operator : '—' }}
        </q-td>
      </template>
      <template v-slot:body-cell-time="props">
        <q-td class="time">
          {{ props.row.time ? props.row.time : '—' }}
        </q-td>
      </template>
      <template v-slot:body-cell-checkinCount="props">
        <q-td class="checkinCount">
          {{ props.row.checkinCount ? props.row.checkinCount : '—' }}
        </q-td>
      </template>
      <template v-slot:body-cell-isAutomatic="props">
        <q-td class="isAutomatic">
          {{ props.row.isAutomatic ? '数据采集' : '手动录入' }}
        </q-td>
      </template>
      <template v-slot:body-cell-remark="props">
        <q-td>
          {{ props.row.remark ? props.row.remark : '—' }}
        </q-td>
      </template>
    </q-table>
  </basic-dialog>
</template>

<script>
import { getCheckinLogs } from 'src/boot/job/process-order'
import moment from 'moment'
import _ from 'lodash'
import { MomentJsUtils } from '../../../../assets/js/util'

export default {
  name: 'complete-detail',
  data () {
    return {
      show: false,
      // 报工明细数据源
      tableData: [],
      isShowInnerLoading: false,
      // 报工明细表格数据列
      columnsCheckinLog: [
        { name: 'id', label: '编号', align: 'left', field: 'id' },
        { name: 'creator', label: '报工人', align: 'left', field: 'creator' },
        { name: 'shiftName', label: '班制', align: 'left', field: 'shiftName' },
        { name: 'operator', label: '操作员', align: 'left', field: 'operator' },
        { name: 'time', label: '报工时间', align: 'left', field: 'time' },
        { name: 'checkinCount', label: '报工数量', align: 'left', field: 'checkinCount' },
        { name: 'processStartTime', label: '开工时间', align: 'left', field: 'processStartTime' },
        { name: 'processEndTime', label: '完工时间', align: 'left', field: 'processEndTime' },
        { name: 'restTime', label: '休息时长（分钟）', align: 'left', field: 'restTime' },
        { name: 'processTime', label: '加工时长', align: 'left', field: 'processTime' },
        { name: 'isAutomatic', label: '报工类型', align: 'left', field: 'isAutomatic' },
        { name: 'remark', label: '备注', align: 'left', field: 'remark' }
      ],
      // 报工明细表格分页器
      paginationCheckinLog: {
        rowsPerPage: 0
      }
    }
  },
  methods: {
    // 打开报工明细
    openCompleteDetails (id) {
      this.show = true
      this.isShowInnerLoading = true
      getCheckinLogs(id).then(res => {
        res.data.forEach(o => {
          o.time = _.isNil(o.time) || _.isEmpty(o.time) ? '--' : moment(o.time).format('YYYY-MM-DD HH:mm')
          o.processStartTime = _.isNil(o.processStartTime) || _.isEmpty(o.processStartTime) ? '--' : moment(o.processStartTime).format('YYYY-MM-DD HH:mm')
          o.processEndTime = _.isNil(o.processEndTime) || _.isEmpty(o.processEndTime) ? '--' : moment(o.processEndTime).format('YYYY-MM-DD HH:mm')
          o.restTime = _.floor((o.restTime || 0) / 60)
          const duration = moment.duration(o.processTime, 'seconds')
          o.processTime = MomentJsUtils.humanizeDurationPrecisely(duration, 's')
        })
        this.tableData = res.data
      }).finally(() => {
        this.isShowInnerLoading = false
      })
    }
  }
}
</script>

<style scoped>

</style>
